<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>
</head>
<style>
/* 	div{width:200px;height:300px;background:black;opacity:.5;position:relative;}
span{width:50px;height:50px;background:red;display:inline-block;position:absolute;top:20px;left:60px;}
p{position:absolute;top:80px;left:60px;color:white;opacity:0;} */
*{margin:0;padding:0;}
a{text-decoration:none;}
li{list-style:none;}
	.show_box{width:200px;height:36px;overflow:hidden;background:#f5f5f5;position:relative;}
	.show_box_img li{line-height:36px;width:160px;}
	.show_box_img{position:relative;top:0;}
	.lunbo_box{width:790px;height:50px;overflow:hidden;border:1px solid black;position:relative;left:300px;top:100px;}
	.lunbo_box_img{position:relative;left:0;width:1580px;height:50px;}
	.lunbo_box_img li{width:120px;height:40px;background:gray;float:left;margin-left:10px;text-align:center;margin-top:5px;}
	a:nth-of-type(1){position:absolute;left:0;top:14px;background:blue;color:white;}
	a:nth-of-type(2){position:absolute;right:0;top:14px;background:red;color:white;}
</style>
<body>
<!--<div id="ab">
	<span></span>
	<p>我来啦</p>
</div> -->
<!--<br>
<br>
<br>
<br> -->
<!-- 	<div class="show_box">
	<ul class="show_box_img">
		<li>沃邦尼公告</li>
		<li>沃邦尼公告</li>
		<li>沃邦尼公告</li>
		<li>沃邦尼公告</li>
		<li>沃邦尼公告</li>
		<li>沃邦尼公告</li>
	</ul>
</div>
<br>
<br>
<br>
<br> -->
<div class="lunbo_box">
		<ul class="lunbo_box_img">
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
			<li>6</li>
		</ul>
		<a href="javascript:void(0);" class="prev">上</a>
		<a href="javascript:void(0);" class="next">下</a>
	</div>
</body>
<script type="text/javascript">
/*	$("#ab").mouseenter(function(){
		$("span").animate({"top":"10","opacity":"0"},1000)
		$("p").animate({"opacity":"1","top":"60px"},1000);
	}).mouseleave(function(){
		$("span").animate({"top":"20","opacity":"1"},1000)
		$("p").animate({"opacity":"0","top":"80px"},1000);
	})*/
/*	$(function(){
		var n=$(".show_box_img").find("li").length;
		var w=$(".show_box_img").find("li").outerHeight()
		var m=0;
		var timer=null;
		$(".show_box_img").append($(".show_box_img li:lt(1)").clone());
		function scroll(){
			m+=1;
			if(m>n){
				$(".show_box_img").css({top:0})
				m=0;
			}
			{
				$(".show_box_img").animate({top:-w*m},500)
			}
		}
		timer=setInterval(scroll,1000);
	})*/
	$(function(){
		var n=$(".lunbo_box_img").find("li").length;
		console.log(n);
		var m=$(".lunbo_box_img").find("li").outerWidth();
		console.log(m);
		var timer=null;
		var z=0;
		$(".lunbo_box_img").append($(".lunbo_box_img li:lt(6)").clone());
		function prev(){
			if($(".lunbo_box_img").is(":animated")){
				$(".lunbo_box_img").stop(true,true);
			}
			z++;
			$(".lunbo_box_img").animate({left:-(m+10)*z},500,function(){
				if(z>=n){
					$(".lunbo_box_img").css({left:0});
					z=0;
				}
			})
		}
		function next(){
			if($(".lunbo_box_img").is(":animated")){
				$(".lunbo_box_img").stop(true,true);
			}
			$(".lunbo_box_img").animate({left:-(m+10)*z},500,function(){
				if(z==0){
					$(".lunbo_box_img").css({left:-(m+10)*n});
					z=5;
				}else{
						z--;
				}
			})
		}
		timer=setInterval(prev,1000);
		$(".lunbo_box").mouseenter(function(){
			clearInterval(timer);
		}).mouseleave(function(){
			timer=setInterval(prev,1000);
		});
		$(".prev").click(function(){
			prev();
		})
		$(".next").click(function(){
			next();
		})

	})
</script>
</html>
